<template>
  <div class="page">
    <div class="lessons">
      <span
        @click="
          $router.push({
            path: 'index',
            query: {
              id: info.group_id
            }
          })
        "
      >返回主课程</span>
      <span>{{ info.name }}</span>
      <div class="next" @click="reload(next_lesson)" v-if="next_lesson">
        <span>下个课时</span>
        <i class="el-icon-arrow-right"></i>
      </div>
    </div>
    <div class="video">
      <video
        controlslist="nodownload"
        oncontextmenu="return false"
        ref="video"
        :src="info.video"
        controls
        autoplay
        :poster="info.image"
      ></video>
      <div>
        <div class="head">
          <img :src="info.teacher_face" alt />
          <span>{{ info.teacher_name }}</span>
        </div>
        <div class="nav">
          <div v-for="(item, index) in 1" :key="index" @click="nav_index = index">
            <span>{{ index == 0 ? "目录" : "" }}</span>
            <div :style="nav_index == index ? 'width: 100%' : ''"></div>
          </div>
        </div>
        <div class="content" v-if="nav_index == 0">
          <el-timeline>
            <el-timeline-item
              v-for="(item, index) in lesson"
              :key="index"
              :color="info.id == item.id ? 'gold' : 'white'"
              size="large"
            >
              <div @click="reload(item.id)" class="name">{{ index + 1 + "." + item.name }}</div>
            </el-timeline-item>
          </el-timeline>
        </div>
        <div class="content" v-else>
          <div class="description">{{ info.description }}</div>
        </div>
      </div>
    </div>
    <h1>{{ info.name }}</h1>
    <h2>{{ info.description }}</h2>
    <div class="file" v-if="info.file">
      <div>本节课堂资料下载</div>
      <div>
        <span>{{info.file_name}}</span>
        <div @click="download">下载课件</div>
      </div>
      <!-- <el-button type="primary" icon="el-icon-document" @click="download" v-if="info.file">下载课件</el-button> -->
    </div>
    <div class="file" v-if="info.file">
      <div>本节课堂VR播放</div>
      <div>
        <!-- <span>文件名称.xlsl</span> -->
        <div>播放VR</div>
      </div>
      <!-- <el-button type="primary" icon="el-icon-document" @click="download" v-if="info.file">下载课件</el-button> -->
    </div>
    <div class="comment">
      <span>留下您的想法</span>
      <div class="release">
        <el-input type="textarea" rows="4" v-model="release_value"></el-input>
        <div type="primary" @click="send" class="mine-button">发表评论</div>
      </div>
      <div v-for="(item, index) in release_list" :key="index">
        <img :src="item.uface || require('@/assets/head.png')" alt />
        <div>
          <span class="name">{{ item.uname }}</span>
          <p>{{ item.comment }}</p>
          <div v-for="(items, index) in item.reply" :key="index" class="reply">
            <img :src="item.uface" alt />
            <div>
              <span>{{ items.uname }} 回复 {{ item.uname }}</span>
              <p>{{ items.comment }}</p>
            </div>
          </div>
          <div class="bottom">
            <span @click="reply_index = false" v-if="reply_index === index">取消回复</span>
            <span @click="showReply(index)" v-else>回复</span>
            <img v-if="item.is_zan == 0" src="@/assets/zan_off.png" alt @click="zan(index)" />
            <img v-else src="@/assets/zan_on.png" alt @click="zan(index)" />
            <span>{{ item.zan }}</span>
            <span @click="deleteComment(index)" v-if="item.uid == item.user_id">删除评论</span>
          </div>
          <div v-if="reply_index === index">
            <el-input placeholder="请输入回复内容..." v-model="reply_value">
              <el-button slot="append" icon="el-icon-chat-line-square" @click="reply(index)"></el-button>
            </el-input>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { setTimeout, clearInterval } from "timers";
import { release } from "os";
export default {
  data() {
    return {
      info: {},
      lesson: [],
      next_lesson: "",
      release_value: "",
      reply_index: false,
      reply_value: "",
      release_list: [],
      nav_index: 0,
      user_id: localStorage.getItem("user_id")
    };
  },
  methods: {
    deleteComment(index) {
      let _this = this;
      _this.$axios
        .delete("lesson/comment-delete/" + _this.release_list[index].id)
        .then(res => {
          if (res) {
            _this.release_list.splice(index, 1);
            _this.$notify({
              title: "成功",
              message: "评论删除成功",
              type: "success"
            });
          }
        });
    },
    showReply(index) {
      let _this = this;
      _this.reply_index = index;
      _this.reply_value = "";
    },
    reply(index) {
      let _this = this;
      _this.$axios
        .post("lesson/comment-reply", {
          id: _this.release_list[index].id,
          comment: _this.reply_value
        })
        .then(res => {
          if (res) {
            _this.release_list[index].reply.unshift({
              uname: localStorage.getItem("user_name"),
              comment: _this.reply_value
            });
            _this.reply_value = "";
            _this.reply_index = false;
          }
        });
    },
    zan(index) {
      let _this = this;
      _this.$axios
        .post("lesson/comment-zan", {
          id: _this.release_list[index].id
        })
        .then(res => {
          if (_this.release_list[index].is_zan == 1) {
            _this.release_list[index].is_zan = 0;
            _this.release_list[index].zan--;
          } else {
            _this.release_list[index].is_zan = 1;
            _this.release_list[index].zan++;
          }
        });
    },
    send() {
      let _this = this;
      _this.$axios
        .post("lesson/comment", {
          lesson_id: _this.$route.query.id,
          comment: _this.release_value
        })
        .then(res => {
          _this.release_value = "";
          _this.$axios
            .get("lesson/comment-log", {
              params: {
                id: _this.$route.query.id
              }
            })
            .then(res => {
              _this.release_list = res.list;
            });
        });
    },
    download() {
      window.open(this.info.file);
    },
    reload(id) {
      let _this = this;
      _this.$axios.post("lesson/start", { id: id });
      _this.info = [];
      _this.$axios.get("lesson/show/" + id).then(res => {
        _this.info = res.info;
        console.log(res.info);
        _this.lesson = res.lesson;
        _this.next_lesson = res.next_lesson;
        _this.release_list = res.comment.list;
      });
    }
  },
  created() {
    let _this = this;
    _this.reload(_this.$route.query.id);
  }
};
</script>

<style lang="less" scoped>
.page {
  width: @width;
  align-items: flex-start;
  @media only screen and (max-width: 500px),
    only screen and (max-device-width: 500px) {
    width: calc(100vw - 0.6rem);
  }
}
.lessons {
  width: @width;
  height: 0.3rem;
  margin-top: 1.5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  color: @node-color;
  position: relative;
  margin-bottom: 0.3rem;
  font-size: @title-size;
  @media only screen and (max-width: 500px),
    only screen and (max-device-width: 500px) {
    width: calc(100vw - 0.6rem);
  }
  > span {
    color: white;
    cursor: pointer;
  }
  .next {
    cursor: pointer;
  }
  .all-lessons {
    width: @width * 0.3;
    max-height: 5rem;
    overflow: scroll;
    scrollbar-width: none;
    background: black;
    border: 1px #444 solid;
    position: absolute;
    top: 0.4rem;
    left: 0;
    z-index: 100;
    > div {
      width: 100%;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      padding: 0 0.2rem;
      cursor: pointer;
      > span {
        width: 100%;
        color: white;
        font-weight: bold;
        font-size: 0.14rem;
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
      }
      > p {
        color: @node-color;
        font-size: @small-size;
        margin-bottom: 0.2rem;
      }
    }
    > div + div span {
      border-top: 1px #444 solid;
    }
    > div:hover {
      background: rgba(255, 255, 255, 0.1);
    }
  }
}
.video {
  width: @width;
  display: flex;
  flex-direction: row;
  height: 540px;
  @media only screen and (max-width: 500px),
    only screen and (max-device-width: 500px) {
    width: calc(100vw - 0.6rem);
    height: auto;
    flex-direction: column;
  }
  > video {
    width: 75%;
    height: 100%;
    background: @dark-color;
    object-fit: contain;
    outline: none;
    background: #262626;
    @media only screen and (max-width: 500px),
      only screen and (max-device-width: 500px) {
      width: 100%;
      height: auto;
    }
  }
  > div {
    width: 25%;
    height: 100%;
    background: @dark-color;
    @media only screen and (max-width: 500px),
      only screen and (max-device-width: 500px) {
      width: 100%;
      height: auto;
    }
    .head {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      box-sizing: border-box;
      padding: 0.2rem;
      > img {
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 0.1rem;
        @media only screen and (max-width: 500px),
          only screen and (max-device-width: 500px) {
          width: 1rem;
          height: 1rem;
        }
      }
      > span {
        @media only screen and (max-width: 500px),
          only screen and (max-device-width: 500px) {
          font-size: 0.35rem;
        }
      }
    }
    .nav {
      width: 100%;
      display: flex;
      flex-direction: row;
      background: rgb(45, 45, 45);
      border-bottom: 1px #444 solid;
      box-sizing: border-box;
      padding-left: 0.3rem;
      padding-right: 0.3rem;
      > div {
        height: 0.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-sizing: border-box;
        > span {
          height: calc(100% - 2px);
          display: flex;
          align-items: center;
          justify-content: center;
        }
        > div {
          width: 0;
          height: 2px;
          background: @gold-color;
          transition: 300ms;
        }
      }
    }
    .content {
      width: 100%;
      height: calc(100% - 1.4rem);
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      padding: 0.3rem;
      padding-bottom: 0;
      overflow: scroll;
      color: @node-color;
      background: rgb(45, 45, 45);
      > div {
        font-size: @normal-size;
        color: @node-color;
      }
      .name {
        color: @node-color;
        @media only screen and (max-width: 500px),
          only screen and (max-device-width: 500px) {
          font-size: 0.2rem;
        }
      }
      .el-button {
        margin-bottom: 0.3rem;
      }
    }
  }
}
h1 {
  width: @width;
  font-size: @title-size;
  box-sizing: border-box;
  margin-top: 0.3rem;
  padding: 0.3rem;
  background: @dark-color;
  color: @gold-color;
  @media only screen and (max-width: 500px),
    only screen and (max-device-width: 500px) {
    width: calc(100vw - 0.6rem);
  }
}
h2 {
  width: @width;
  font-size: @normal-size;
  font-weight: normal;
  background: @dark-color;
  box-sizing: border-box;
  padding: 0.3rem;
  padding-top: 0;
  @media only screen and (max-width: 500px),
    only screen and (max-device-width: 500px) {
    width: calc(100vw - 0.6rem);
  }
}
.file {
  width: @width;
  background: @dark-color;
  box-sizing: border-box;
  padding: 0.3rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-size: @title-size;
  margin-top: 0.3rem;
  @media only screen and (max-width: 500px),
    only screen and (max-device-width: 500px) {
    width: calc(100vw - 0.6rem);
  }
  > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: @gold-color;
    > span {
      margin-right: 0.2rem;
      font-size: @normal-size;
      color: white;
    }
    > div {
      padding: 0.1rem 0.3rem;
      background: black;
      cursor: pointer;
      transition: 300ms;
      font-size: @normal-size;
      color: white;
    }
    > div:hover {
      background: @gold-color;
      color: black;
      font-weight: bold;
    }
  }
}
.comment {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 0.3rem;
  background: @dark-color;
  box-sizing: border-box;
  padding: 0.3rem;
  @media only screen and (max-width: 500px),
    only screen and (max-device-width: 500px) {
    width: calc(100vw - 0.6rem);
  }
  > span {
    width: 100%;
    padding-bottom: 0.2rem;
    margin-bottom: 0.3rem;
    border-bottom: 1px #444 solid;
    color: @gold-color;
    font-size: @title-size;
  }
  > div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    > img {
      width: 0.6rem;
      height: 0.6rem;
      object-fit: cover;
      background: @gold-color;
      border-radius: 50%;
    }
    > div {
      width: calc(100% - 0.8rem);
      display: flex;
      flex-direction: column;
      font-size: @title-size;
      > p {
        width: 100%;
        color: white;
        font-weight: lighter;
        margin-bottom: 0.1rem;
        font-size: @normal-size;
      }
      > span {
        width: 60%;
        box-sizing: border-box;
        padding: 0.1rem 0.2rem;
        background: #444;
        font-size: @small-size;
      }
      > span + span {
        padding-top: 0;
      }
      .name {
        background: transparent;
        padding: 0;
        margin-bottom: 0.1rem;
        font-size: @title-size;
        font-weight: bold;
      }
      .reply {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 0.3rem;
        > img {
          width: 0.5rem;
          height: 0.5rem;
          object-fit: cover;
          background: @gold-color;
          margin-right: 0.2rem;
          border-radius: 50%;
        }
        > div {
          display: flex;
          flex-direction: column;
          font-size: @normal-size;
          > p {
          }
        }
      }
      .bottom {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        > img {
          width: @normal-size;
          height: @normal-size;
          object-fit: contain;
          cursor: pointer;
          margin-left: 0.2rem;
          margin-right: 5px;
          filter: brightness(300%);
        }
        > span {
          font-size: @small-size;
          cursor: pointer;
        }
        > span + span {
          margin-left: 0.2rem;
          color: red;
        }
        .el-input {
          width: 100%;
          margin-top: 0.2rem;
        }
      }
    }
  }
  > div + div {
    margin-top: 0.3rem;
    border-top: 1px #444 solid;
    padding-top: 0.3rem;
  }
  .mine-button {
    width: 1.2rem;
    margin-left: calc(100% - 1.2rem);
    margin-top: 0.3rem;
    font-size: @small-size;
    @media only screen and (max-width: 500px),
      only screen and (max-device-width: 500px) {
      width: 2rem;
      margin-left: calc(100% - 2rem);
    }
  }
  .release {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .el-textarea {
      width: 100%;
    }
    .el-button {
      width: 1.2rem;
      margin-top: 0.2rem;
    }
  }
}
</style>
